<template>
	<div class="header">
		<img src="@/assets/img/mobile/logo.png" class="logo"/>
		<ul class="menus">
			<li><router-link to="/mobile/home">首页推荐</router-link></li>
			<li><router-link to="/mobile/booklist">书库</router-link></li>
			<li><router-link to="/mobile/myhome">我的</router-link></li>
		</ul>
		<!-- <div class="search" :style="{ 'width' : isaBool?'16rem':'2rem' }">
			<form :style="{ 'background-color' : isaBool?'white':'unset' }">
				<input :style="{ 'display' : isaBool?'block':'none' }"
				placeholder="请输入搜索的书籍名称"/>
				<aside @click="isaBool = !isaBool">
					<img src="@/assets/img/mobile/search.png"/>
				</aside>
			</form>
		</div> -->
		<div class="search" @click="goSearch()">
			<img src="@/assets/img/mobile/search.png"/>
		</div>
	</div>
</template>

<script>
export default {
	name:'MobileHeader',
	data(){
		return{
			// isaBool : false,		//默认不启动动画
		}
	},
	methods:{
		Animation(){
			console.log(this.isaBool);
		},
		goSearch(){
			this.$router.push('/mobile/search');
		}
	}
}
</script>

<style scoped>
.header{
	width: 100%;
	height: 3.5rem;
	background-color: #a68b5b;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	top: 0;
	z-index: 10;
	/* position:relative; 定位的元素保留原本的位置*/
	/* position:absolute;定位的元素抛弃原来的位置,被其他标签顶替 */
}
.header .logo{
	margin-left: 0.5rem;
}
.header .menus{
	margin: 0;
	padding: 0;
	list-style: none;
	width: 55%;
	height: 100%;
	color: white;
	/* 默认显示；动画开始的时候，设置为隐藏状态 */
	display: block;
}
.header .menus li a{
	width: 33.33%;
	float: left;
	height: 3.2rem;
	line-height: 3.2rem;
	text-align: center;
	display: block;
	color: white;
}
.header .menus li .router-link-active{
	border-bottom: 0.3rem solid gold;
	color: gold;
}
.header .search{
	/* position: relative; */
	/* right: 0.5rem; */
	/* 默认div标签没有宽度；动画开始时，设置20rem的宽度 */
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 1px solid white;
	margin-right: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* PC端的事件；鼠标事件：手指事件/手势事件touch */
/* hover属于PC端的鼠标操作，不适合在移动端运行 */
/* .header .search:hover{ */
	/* 动画的名字 动画的时长 */
	/* animation: formWidth 1s linear; */
/* } */

/* 将form标签宽度从2rem一一16rem */
@keyframes formWidth{
	/* 宽度从2rem开始 */
	0%{
		width: 2rem;
	}
	/* 到20rem结束 */
	100%{
		width: 20rem;
	}
}
</style>
